import React, { useState } from "react";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
  AddOutline,
  ShopbagOutline,
} from "antd-mobile-icons";
import { Badge, TabBar } from "antd-mobile";
import { useNavigate, useLocation ,BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { Outlet } from "react-router-dom";


export default function App() {
  const navigator = useNavigate();
  const tabs = [
    {
      key: "/shou",
      title: "首页",
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: "/cart",
      title: "购物车",
      icon: <ShopbagOutline />,
      badge: "5",
    },
    {
      key: "/publish",
      title: "上传",
      icon: <AddOutline />,
    },
    {
      key: "/message",
      title: "消息",
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
      badge: "99+",
    },
    {
      key: "/my",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  const location = useLocation();
  const [activeKey, setActiveKey] = useState(location.pathname);
  return (
    <div style={{width:'100%',height:'100%'}}>
      <div style={{width:'100%',height:'100%',overflow:'hidden'}}>
        <Outlet></Outlet>
      </div>
      <div style={{ position: "fixed", bottom: "0", width: "100%",backgroundColor:'#fff' }}>
        <TabBar
          onChange={(value) => {
            navigator(value);
            setActiveKey(value);
          }}
          activeKey={activeKey}
        >
          {tabs.map((item) => (
            <TabBar.Item
              key={item.key}
              icon={item.icon}
              title={item.title}
              badge={item.badge}
            />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
